<template lang="">
    <div class="actualZone" :style='{backgroundColor:prop.style.backColor,border:prop.style.theBorder}'>
      <div class='theLighter' :style='{backgroundColor:prop.style.lighterColor}'></div>
      <div class="imgContainer">
        <n-image preview-disabled :src=prop.style.imgUrl />
      </div>  
      <n-p class="theP">
        {{position}}  
      </n-p>
      <n-button  class='theButton' :disabled='disabled' :color='prop.style.buttonColor' size='large' @click=handleLock>  
        <n-icon :style='{display:prop.style.theIcon}' size="16">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M8 11.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2zm0-9A1.5 1.5 0 0 0 6.5 4v2h5A1.5 1.5 0 0 1 13 7.5v6a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 13.5v-6A1.5 1.5 0 0 1 4.5 6h1V4a2.5 2.5 0 0 1 5 0a.5.5 0 0 1-1 0A1.5 1.5 0 0 0 8 2.5zM4.5 7a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-7z" fill="currentColor"></path></g></svg>
        </n-icon>
        {{ buttonText }}
        {{ countDown }}
      </n-button>
    </div>
</template>
<script>
import axios from 'axios';
import { LockOpen16Regular } from '@vicons/fluent'
export default {
  components: {
    LockOpen16Regular
  },
  props: {
    prop: Object
  },
  data() {
    return {
      headers: {},
      buttonText: '',
      position: this.prop.position,
      disabled: false,
      count: 3,
      timer: null,
      countDown: ''
    }
  },
  beforeMount() {
    this.headers.Authorization = this.$route.query.ut
  },
  mounted() {
    this.connectTest();//切换到开门页面先测门连接与否
  },
  methods: {
    connectTest() {
      const query = {
        position: this.position
      }
      axios({
        method: 'get',
        url: '/esp8266/door/testConnect',
        headers: this.headers,
        params: query
      }).then(res => {
        if (res.data.code == 200) {
          this.buttonText = '开锁'
          const arg = {
            value: '1',
            position: this.position
          }
          this.$emit('door-res', arg)
        } else if (res.data.code != 200) {//设备未连接
          this.buttonText = '设备未连接'
          this.disabled = true
          const arg = {
            value: '0',
            position: this.position
          }
          this.$emit('door-res', arg)
        }
      }).catch(r => {
        this.buttonText = '设备未连接'
        const arg = {
          value: '0',
          position: this.position
        }
        this.$emit('door-res', arg)
      })
    },
    handleLock() {
      this.disabled = true;
      this.countDown = `(${this.count})`
      this.timer = setInterval(() => {
        this.count--;
        this.countDown = this.countDown = `(${this.count})`;

        if (this.count <= 0) {
          clearInterval(this.timer);
          this.count = 3;
          this.countDown = '';
          this.disabled = false;
        }
      }, 1000)
      axios({
        method: 'post',
        url: '/esp8266/door/open',
        data: {
          position: this.position
        },
        headers: this.headers
      }).then(res => {
        if (res.data.code == 200) {
          const arg = {
            refresh: 1
          }
          this.$emit('door-res', arg)
        } else if (res.data.code == 500) {
        }
      }).catch(r => {
      })
    }
  }
}
</script>
<style scoped>
.actualZone {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;

  padding: 10px;

  border-radius: 10px;

  max-width: 260px;
  min-height: 320px;
  position: relative;
}

.imgContainer {
  display: flex;
  align-items: end;
  justify-content: center;
  flex: 1;
}

.theP {
  margin-top: 20px;
  margin-bottom: 31px;

  font-size: 16px;
  font-weight: 600;
}

.theButton {
  width: 100%;
  border-radius: 8px;
}

.theLighter {
  position: absolute;
  box-sizing: border-box;
  margin: 4px;
  top: 10px;
  right: 10px;

  height: 8px;
  width: 8px;

  border-radius: 50%;
}
</style>